<!DOCTYPE html>

<html lang="en">



<head>

    <!-- 



        1.getTempFileURL 限制一次最多获取50条

     -->

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <!-- 视口标签 -->

    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">

    <!-- 引入CSS文件 -->

    <link rel="stylesheet" href="static/css/member.css">

    <title>Web运营端-成员管理2</title>

    <!-- 开发环境版本，包含了有帮助的命令行警告 -->

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <!-- jQuery -->

    <script src="https://code.jquery.com/jquery-1.12.4.js" integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU=" crossorigin="anonymous"></script>

    <!-- ElementUI -->

    <!-- 引入样式 -->

    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

    <!-- 引入组件库 -->

    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

    <!-- 云开发Web SDK -->

    <script src="./static/js/cloud.js"></script>

    <!--  特点：

    1.直接在Windows对象上挂载cloud对象，在使用时直接cloud即可

        配置过程

        1.使用new cloud创建对象，传入对应的资源id和APPID

        2.使用cloud对象中的inti方法进行初始化

    -->

    <!-- 压缩zip用的库 -->

    <script src="./static/js/axios.min.js"></script>

    <script src="./static/js/jszip.js"></script>

    <script src="./static/js/FileSaver.min.js"></script>

    <!-- 导出excel -->

    <script src="./static/js/export.js"></script>

    <script src="./static/js/xlsx.full.min.js"></script>

    <script src="./static/js/js.cookie.min.js"></script>



    <style>
        .manage span:nth-child(1) {
            position: absolute;
            top: 30px;
            right: 200px;
        }
        
        .manage span:nth-child(2) {
            position: absolute;
            top: 30px;
            right: 298px;
        }
        
        .manage .member {
            background-color: rgb(51, 44, 122);
            margin-right: -18px;
        }
        
        .exportAll {
            display: none;
        }
        /* 同一级

        .exportMenu:hover+ .exportAll{

        

        display: block;

        } */
        /* 子父元素 */
        
        .exportMenu:hover .exportAll {
            display: block;
        }
        
        .exportAll:hover {
            display: block;
        }
    </style>

</head>



<body>

    <div id="root" v-loading="isLoading">

        <!-- 上椭圆背景 -->

        <div class="topborder">

            <div class="topcircle">

                <div class="purple"></div>

            </div>



            <div class="smallcircle"></div>

        </div>



        <!-- 下椭圆背景 -->

        <div class="bottomborder">

            <div class="bottomcircle">

                <div class="blue"></div>

            </div>



        </div>





        <div class="center">
            <!-- 白框 -->

            <div class="banner">
                <!-- 左侧边栏 -->

                <div class="left">

                    <div class="picture">

                        <img :src="(personInfo.avatarUrl)?(personInfo.avatarUrl):('static/images/047-girl.svg')" alt="user" class="avatarImg">

                    </div>

                    <div class="username"><span>{{personInfo.realName}}</span></div>



                    <aside>

                        <ul>

                            <li><a :class="select=='秘书处'?'select':1" @click="getMessage('秘书处')" href="#">秘书</a></li>

                            <li><a :class="select=='动画部'?'select':1" href="#" @click="getMessage('动画部')">动画</a></li>

                            <li><a :class="select=='影视部'?'select':1" href="#" @click="getMessage('影视部')">影视</a></li>

                            <li><a :class="select=='UI设计部'?'select':1" href="#" @click="getMessage('UI设计部')">UI</a></li>

                            <li><a :class="select=='PC技术部'?'select':1" href="#" @click="getMessage('PC技术部')">PC</a></li>

                            <li><a :class="select=='网络研发部'?'select':1" href="#" @click="getMessage('网络研发部')">网研</a></li>

                            <li><a :class="select=='新媒体运营部'?'select':1" href="#" @click="getMessage('新媒体运营部')">新媒体</a>
                            </li>

                        </ul>

                    </aside>

                </div>
                <!-- <img class="boy" src="static/images/boy.svg" alt="图片"> -->





                <!-- 框中间 -->
                <div class="banner_center">
                    <!-- 中上 -->
                    <div class="centerTop">
                        <el-tooltip class="item" effect="dark" content="插画作者：朱晓彤" placement="top-start">
                            <img src="./static/images/keke.png" alt="趴趴科科" class="papakeke">
                        </el-tooltip>
                        <div id="flex布局左边占位" style="width: 10px;"></div>

                        <!-- flex布局右边 -->
                        <div style="display: flex;align-items: center;">

                            <!-- 查看成员 -->
                            <div class="addMargin">
                                <el-button plain class="seeButton" @click="getMember()">查看成员</el-button>
                            </div>



                            <!-- 查看投递 -->
                            <div class="addMargin">
                                <el-button plain class="seeButton" @click="getMessage(nowDepartment)">查看投递</el-button>
                            </div>


                            <!-- 添加成员 -->
                            <div class="addMember addMargin" @click="dialogTableVisible=true">
                                <img src="./static/images/addMember.svg" alt="" class="addIcon">
                                <div style="color:rgb(255, 255, 255);vertical-align:center">添加成员</div>
                            </div>

                            <!-- 导出 -->
                            <div class="wyhExportMenu addMargin">
                                <el-dropdown @command="handleCommand">
                                    <span class="el-dropdown-link">
                                        <img src="./static/images/export.svg" alt="" class="exportImg">
                                        导出<i class="el-icon-arrow-down el-icon--right"></i>
                                    </span>
                                    <el-dropdown-menu slot="dropdown">
                                        <el-dropdown-item command="exportExcel">
                                            <div class="wyh_DropItem"><img src="./static/images/Excel.svg" alt="" class="excelSVG"> 导出excel
                                            </div>
                                        </el-dropdown-item>
                                        <el-dropdown-item command="exportApplication">
                                            <div class="wyh_DropItem"><img src="./static/images/zip.svg" alt="" class="zipSVG"> 导出压缩包
                                            </div>
                                        </el-dropdown-item>
                                    </el-dropdown-menu>
                                </el-dropdown>
                            </div>

                            <!-- 刷新 -->
                            <img src="static/images/refresh.svg" class="refreshIcon addMargin" style="visibility: hidden;">

                            <!-- 搜索框 -->

                            <div class="box addMargin">
                                <div>
                                    <form action="" class="parent">
                                        <input class="searchInput" type="text" class="search" placeholder="search" v-model="keyword">
                                        <img src="static/images/search.svg" alt="图片" class="searchIcon">
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 中-下 -->
                    <div class="table">

                        <table cellspacing="0" id="table">

                            <thead class="tableHead">

                                <tr>

                                    <th><input type="checkbox" @click="selectAll" id="selectAll" :checked="isAll"></th>

                                    <th>工号</th>

                                    <th>姓名</th>

                                    <th>职位</th>

                                    <th>入职时间</th>

                                    <th>操作</th>

                                </tr>

                            </thead>

                            <tbody class="tableBody">

                                <template>

                                    <tr v-for="(item,index) in list" :key="item.realName">

                                        <td style="border-radius: 3.5vh 0 0 0"><input type="checkbox"
                                                @click="checkUser($event,item)" id="checkUser" name="checkbox"
                                                :checked="item.check">

                                        </td>

                                        <!-- 勾选思路，

                                    1.如果选中则向item添加select=true  √

                                    2.导出时遍历当前userInfo，拿到select为true的，然后储存在_openidArray √

                                    3.使用_openid查询到willing表中对应的,然后储存到fileidArray 

                                    4.遍历fileArrayID获得downloadURL

                                    5.压缩

                                    -->
                                        <td></td>
                                        <td>{{ item.realName}}</td>
                                        <td>{{ item.Position}}</td>
                                        <td>{{ item.admitTime }}</td>
                                        <td class="operateTD">
                                            <ul>
                                                <li><a href="#"
                                                        @click="alertWindows(item._openid,item.realName,item.department,item.Position)">职位修改</a>
                                                </li>
                                                <li><a href="#"
                                                        @click="deleteUser(item._openid,item.realName,index)">删除</a>
                                                </li>
                                                <li><button @click="viewApplication(item._openid)"
                                                        style="cursor: pointer;">查看报名表</button></li>
                                            </ul>
                                        </td>
                                    </tr>
                                </template>
                            </tbody>
                        </table>

                        <!-- 只作为excel导出的table -->

                        <template>

                            <table id="checkItemArray" style="display: none">

                                <thead>

                                    <tr>

                                        <th>工号</th>

                                        <th>姓名</th>

                                        <th>职位</th>

                                        <th>入职时间</th>

                                    </tr>

                                </thead>

                                <tbody>

                                    <tr class="itemInfo" v-for="(item,index) in checkItemArray" :key="item.realName">

                                        <td> </td>

                                        <td>{{ item.realName}}</td>

                                        <td>{{ item.Position}}</td>

                                        <td>{{ item.admitTime }}</td>

                                    </tr>

                                </tbody>



                            </table>

                        </template>

                    </div>

                </div>

                <!-- 右侧边栏 -->

                <div class="right">
                    <div style="display: flex; justify-content: center;padding-top:20px ;">
                        <el-tooltip class="item" effect="dark" content="插画作者：朱晓彤" placement="top-start">
                            <img class="kekeReadBook" src="static/images/kekeReadBook.png" alt="图片">
                        </el-tooltip>
                    </div>


                    <div class="mm">

                        <div class="max">

                            <ul>

                                <li>{{dArr[0].title}}</li>

                                <li>{{dArr[0].num}}</li>

                            </ul>

                            <div>MAX</div>

                        </div>

                        <div class="min">

                            <ul>

                                <li>{{dArr[6].title}}</li>

                                <li>{{dArr[6].num}}</li>

                            </ul>

                            <div>MIN</div>

                        </div>

                    </div>

                    <div class="chart">
                        <!-- 吴颖浩备注：暂时不管 -->
                        <!-- 间隔色背景 -->

                        <!-- <table cellspacing="0">

                            <tbody>
                                <tr v-for="7">
                                    <td></td>
                                </tr>
                            </tbody>

                        </table> -->

                        <!-- 柱条 -->

                        <ul>
                            <div class="columnLineAndTextBox">
                                <li class="ui" :style="[{'height':ui*0.7+'vh'}]"><span>{{ui}}</span></li>
                                <div class="text">UI</div>
                            </div>
                            <div class="columnLineAndTextBox">
                                <li class="ms" :style="[{'height':ms*0.7+'vh'}]"><span>{{ms}}</span></li>
                                <div class="text">秘书</div>
                            </div>
                            <div class="columnLineAndTextBox">
                                <li class="ys" :style="[{'height':ys*0.7+'vh'}]"><span>{{ys}}</span></li>
                                <div class="text">影视</div>
                            </div>
                            <div class="columnLineAndTextBox">
                                <li class="pc" :style="[{'height':pc*0.7+'vh'}]"><span>{{pc}}</span></li>
                                <div class="text">PC</div>
                            </div>
                            <div class="columnLineAndTextBox">
                                <li class="xmt" :style="[{'height':xmt*0.7+'vh'}]"><span>{{xmt}}</span></li>
                                <div class="text">新媒体</div>
                            </div>
                            <div class="columnLineAndTextBox">
                                <li class="dh" :style="[{'height':dh*0.7+'vh'}]"><span>{{dh}}</span></li>
                                <div class="text">动画</div>
                            </div>
                            <div class="columnLineAndTextBox">
                                <li class="wy" :style="[{'height':wy*0.7+'vh'}]"><span>{{wy}}</span></li>
                                <div class="text">网研</div>
                            </div>

                        </ul>



                        <h4>各部门人数总览</h4>

                    </div>

                </div>



            </div>


        </div>






        <!-- 管理按钮  调换顺序才能压住后一个 -->

        <div class="navigate">

            <a class="span1" href="#">成员管理</a>

            <a class="span2" href="usersmanage.html">用户管理</a>

        </div>



        <!-- 弹窗 -->

        <div id="myModal" class="modal">

            <!-- 弹窗内容 -->

            <div class="modal-content">

                <div class="modal-header">

                    <span class="close">&times;</span>

                    <h2>修改用户信息</h2>

                </div>

                <div class="modal-body">

                    <div><span>_openid:</span>{{openid}}</div>

                    <div><span>姓名:</span> <input type="text" v-model="realName" class="windowsInput"></div>

                    <div><span>隶属部门:</span>

                        <select v-model="department" class="windowsInput">

                            <option value="" style="display: none"></option>

                            <option value="网络研发部">网络研发部</option>

                            <option value="秘书处">秘书处</option>

                            <option value="UI设计部">UI设计部</option>

                            <option value="PC技术部">PC技术部</option>

                            <option value="宣传部">宣传部</option>

                            <option value="动画部">动画部</option>

                            <option value="新媒体运营">新媒体运营</option>

                            <option value="影视部">影视部</option>

                        </select>

                    </div>

                    <div><span>职位:</span>

                        <select name="" v-model="Position" class="windowsInput">

                            <option value="" style="display: none"></option>

                            <option value="正部长">正部长</option>

                            <option value="副部长">副部长</option>

                            <option value="干事">干事</option>

                        </select>



                    </div>

                    <button @click="changUser" style="height: 30px;font-weight: 700;">确定修改</button>

                </div>

                <div class="modal-footer">

                    <p style="text-align: right;">@By——网络研发部</p>

                </div>

            </div>



        </div>





        <el-dialog title="添加成员" :visible.sync="dialogTableVisible" width="30%">

            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">

                <el-form-item label-position label="姓名" prop="realName">

                    <el-input v-model="ruleForm.realName"></el-input>

                </el-form-item>

                <el-form-item label="班级" prop="class">

                    <el-input v-model="ruleForm.class"></el-input>

                </el-form-item>

                <el-form-item label="邮箱" prop="email">

                    <el-input v-model="ruleForm.email"></el-input>

                </el-form-item>

                <el-form-item label="手机号" prop="phoneNumber">

                    <el-input v-model="ruleForm.phoneNumber"></el-input>

                </el-form-item>

                <el-form-item>

                    <el-select v-model="ruleForm.department" placeholder="请选择部门">

                        <el-option label="网络研发部" value="网络研发部"></el-option>

                        <el-option label="秘书处" value="秘书处"></el-option>

                        <el-option label="UI设计部" value="UI设计部"></el-option>

                        <el-option label="PC技术部" value="PC技术部"></el-option>

                        <el-option label="动画部" value="动画部"></el-option>

                        <el-option label="新媒体运营" value="新媒体运营部"></el-option>

                        <el-option label="影视部" value="影视部"></el-option>

                    </el-select>

                </el-form-item>

                <el-form-item>

                    <el-select v-model="ruleForm.position" placeholder="请选择职位">

                        <el-option label="主席" value="主席"></el-option>

                        <el-option label="副主席" value="副主席"></el-option>

                        <el-option label="部长" value="部长"></el-option>

                        <el-option label="副部长" value="副部长"></el-option>

                        <el-option label="干事" value="干事"></el-option>



                    </el-select>

                </el-form-item>

                <el-form-item label-position="right">

                    <el-button type="primary" @click="addMember">立即添加</el-button>

                    <el-button @click="resetForm()">重置</el-button>

                </el-form-item>

            </el-form>



        </el-dialog>



    </div>









</body>

<script>
    //将微信挂载在Window上的cloud挂载到vue实例上

    Vue.prototype.Cookie = window.Cookies



    const c = window.cloud

    Vue.prototype.cloud = c

    Vue.config.productionTip = false //阻止vue在启动时生成生产提示

    Vue.config.devtools = true;





    var vm = new Vue({

        el: "#root",

        data: {
            //当前侧边栏所选的部门
            nowDepartment: '',
            openidArray: [],
            ruleForm: {

                realName: '',

                class: '',

                email: '',

                phoneNumber: '',

                department: '',

                position: '',



            },

            rules: {

                realName: [

                    {
                        required: true,
                        message: '请输入真实名字',
                        trigger: 'blur'
                    },

                    {
                        min: 3,
                        max: 5,
                        message: '长度在 3 到 5 个字符',
                        trigger: 'blur'
                    }

                ],

                class: [

                    {
                        required: true,
                        message: '请输入班级',
                        trigger: 'blur'
                    }

                ],

                email: [

                    {
                        type: 'email',
                        required: true,
                        message: '请输入邮箱',
                        trigger: 'blur'
                    }

                ],

                phoneNumber: [

                    {
                        required: true,
                        message: '请输入电话号码',
                        trigger: 'blur'
                    },

                    {
                        min: 11,
                        max: 11,
                        message: '请输入正确的手机号',
                        trigger: 'blur'
                    }



                ],

                department: [

                    {
                        required: true,
                        message: '请至少选择一个部门',
                        trigger: 'change'
                    }

                ],

                position: [

                    {
                        required: true,
                        message: '请选择一个职位',
                        trigger: 'change'
                    }

                ],

                desc: [

                    {
                        required: true,
                        message: '请填写活动形式',
                        trigger: 'blur'
                    }

                ]

            },

            usersInfo: [{
                realName: '案例'
            }], //储存显示的用户信息

            // userInfo 里的 item 的check 表示是否被选中

            select: "秘书处",

            list: [],

            keyword: '',

            openidArray: [], //储存选中的_openid

            /* ,

            inputValue: "好好学习，天天向上" */

            fileidArray: [], //

            downloadURL: [],

            checkItemArray: [], //选中的序列。，

            openid: "", //保存的临时

            realName: "",

            department: "网络研发部",

            Position: '',

            isLoading: false, //控制是否启用窗口加载

            FilearrayArray: [], //切割后的二级数组、

            ms: 0,

            dh: 0,

            ys: 0,

            ui: 0,

            pc: 0,

            wy: 0,

            xmt: 0,

            dArr: [{
                title: '秘书',
                num: 0
            }, {
                title: '动画',
                num: 0
            }, {
                title: '影视',
                num: 0
            }, {
                title: 'UI',
                num: 0
            }, {
                title: 'PC',
                num: 0
            }, {
                title: '网研',
                num: 0
            }, {
                title: '新媒体',
                num: 0
            }],

            newRealNmae: '',

            newClass: '',

            newEmail: '',

            newPhone: '',

            newDepartment: '',

            newPosition: '',

            dialogTableVisible: false,

            personInfo: {},



        },

        computed: {

            // 已经选中的数量

            checkedNumber: {

                get() {

                    console.log("改变了");

                    return this.list.reduce((pre, todo) => pre + (todo.check ? 1 : 0), 0)

                }





            },

            // 是否全部被勾中

            isAll: {

                get() {

                    console.log("isAll");

                    return this.checkedNumber == this.list.length && this.list.length != 0

                }

            }







        },

        methods: {

            resetForm() {

                this.ruleForm = {

                    realName: '',

                    class: '',

                    email: '',

                    phoneNumber: '',

                    department: '',

                    position: '',



                }

            },

            addMember() {

                if (this.ruleForm.department != '' || this.ruleForm.realName != '' || this.ruleForm.class !=
                    '' || this.ruleForm.email != '' || this.ruleForm.phoneNumber != '' || this.ruleForm
                    .position != '') {

                    this.db.collection("Users").add({

                        data: {

                            realName: this.ruleForm.realName,

                            _class: this.ruleForm.class,

                            email: this.ruleForm.email,

                            phoneNumber: this.ruleForm.phoneNumber,

                            Position: this.ruleForm.position

                        }

                    }).then(res => {

                        console.log(res);

                        this.$message({

                            message: '添加成功',

                            type: 'success'

                        });

                    })

                } else {

                    this.$message({

                        message: '请完善信息',

                        type: 'warning'

                    });

                }

            },

            spliceArray(array, number = 50) {

                var count = array.length

                var batchTime = Math.ceil(count / number);

                if (batchTime >= 2) {

                    var fileidArrayCount = [batchTime];

                    var spliceArray = []

                    // 1. 创建数组数组xxxcount 长度为batchtime  

                    // 2. 切割数组，按 50开始切

                    //3.切完的放进  count的[i]中

                    // 获取了 n个，然后让这个数组中包含 fileidArray i * (i+1)50的项

                    for (let i = 0; i < batchTime; i++) {

                        // console.log(i,batchTime);

                        var spliceArray = []

                        for (let j = i * 50; j < ((i + 1) * 50); j++) {

                            spliceArray.push(array[j]);

                            if (!(array[j + 1])) {

                                break;

                            }

                        }

                        // console.log("第一次走完了",spliceArray);

                        fileidArrayCount[i] = spliceArray;

                        // 



                    }

                    console.log("切割后的", fileidArrayCount);

                    return fileidArrayCount



                }

            },

            checkCookie() {

                // 如果存在cookie

                if (this.Cookie.get("personInfo")) {

                    let info = JSON.parse(this.Cookie.get("personInfo"));

                    this.personInfo = info

                    if (info) {

                        // console.log("用户已经登录");

                        // console.log("本地cookie为");

                        // console.log(info);

                        //对cookie内容进行校验

                        // console.log(info._openid);

                        this.db.collection("operationUsers").where({

                            email: info.email

                        }).get().then(res => {

                            if (res.data[0].webPassword == info.webPassword) {

                                console.log("cookie正确");



                            } else {

                                this.$message({

                                    message: '请勿盗用他人cookie',

                                    type: 'error'

                                });





                                location.href = "./index.html"

                            }

                        })

                    } else {

                        console.log("用户未登录");

                        location.href = "./index.html"

                        // let personInfo={a:1,b:2}

                        // let jsontoString=JSON.stringify(personInfo)

                        // this.Cookie.set("personInfo",jsontoString,{expires:1})

                    }

                } else {

                    this.$message({

                        message: '请登录',

                        type: 'error'

                    });

                    location.href = './index.html'

                }



            },

            //配置微信

            async initWx() {

                //创建新的cloud实例

                var c1 = new this.cloud.Cloud({

                    identityless: true,

                    // 资源方 AppID 填自己的

                    resourceAppid: 'wx96f760966921f98a',

                    // 资源方环境 ID	填自己的

                    resourceEnv: 'cloud1-8g54d6xb74e96e7d'

                })

                //初始化,使用await将异步转化为同步

                await c1.init()

                console.log('初始化完成');

                this.cloud = c1

                this.db = this.cloud.database()

                this._ = this.db.command;

            },

            async getData() {

                this.db.collection("Users")

                .where({

                    department: "秘书处"

                })

                .get().then(res => {

                    this.dArr[0].num = this.ms = res.data.length

                    console.log('秘书处', this.ms, '人')

                })

                this.db.collection("Users")

                .where({

                    department: "动画部"

                })

                .get().then(res => {

                    this.dArr[1].num = this.dh = res.data.length

                    console.log('动画部', this.dh, '人')

                })

                this.db.collection("Users")

                .where({

                    department: "影视部"

                })

                .get().then(res => {

                    this.dArr[2].num = this.ys = res.data.length

                    console.log('影视部', this.ys, '人')

                })

                this.db.collection("Users")

                .where({

                    department: "UI设计部"

                })

                .get().then(res => {

                    this.dArr[3].num = this.ui = res.data.length

                    console.log('UI设计部', this.ui, '人')

                })

                this.db.collection("Users")

                .where({

                    department: "PC技术部"

                })

                .get().then(res => {

                    this.dArr[4].num = this.pc = res.data.length

                    console.log('PC技术部', this.pc, '人')

                })

                this.db.collection("Users")

                .where({

                    department: "网络研发部"

                })

                .get().then(res => {

                    this.dArr[5].num = this.wy = res.data.length

                    console.log('网络研发部', this.wy, '人')

                })

                this.db.collection("Users")

                .where({

                    department: "新媒体运营部"

                })

                .get().then(res => {

                    this.dArr[6].num = this.xmt = res.data.length

                    console.log('新媒体运营部', this.xmt, '人')

                    this.dArr.sort(this.sortBy('num'))

                    console.log('降序排序后：', this.dArr)

                })

            },

            sortBy(i) {

                return function(m, n) {

                    return n[i] - m[i] //降序

                }

            },

            async getMessage(department = "秘书处") {
                const loading = this.$loading({
                    lock: true,
                    text: 'Loading',
                    background: 'rgba(255, 255, 255, 0.7)'
                });
                this.nowDepartment = department;

                console.log("获取信息");

                $("#selectAll").removeProp("checked")

                this.select = department

                // 1.根据侧边栏的不同，然后获取不同部门的人员
                //2.先根据department获取到willings中对应的_openid,然后再使用查到的openidArray去Users拿到user数据

                await this.cloud.callFunction({
                        // 要调用的云函数名称
                        name: 'getAllDepartmentOpenID',
                        // 传递给云函数的 event 参数
                        data: {
                            departmentName: department
                        }
                    }).then(res => {
                        // output: res.result === 3
                        console.log(res)
                        var oldArray = []
                        for (let val of res.result.data) {
                            oldArray.push(val._openid)
                        }
                        this.openidArray = oldArray;
                        console.log("结束了");

                    }).catch(err => {
                        // handle error
                        console.log(err)
                    })
                    /*1.写一个department参数，点击不同部门时传入不同参数

                        2.在方法中使用where分开 

                     */


                await this.cloud.callFunction({
                    // 要调用的云函数名称
                    name: 'getAllUsers22_9_26',
                    // 传递给云函数的 event 参数
                    data: {
                        _openidArray: this.openidArray
                    }
                }).then(res => {
                    // output: res.result === 3

                    console.log(res);

                    var dataArray = res.result.data

                    var arraryLength = dataArray.length

                    this.usersInfo.splice(0, this.usersInfo.length)

                    for (let i = 0; i < arraryLength; i++) {

                        this.usersInfo.push(dataArray[i])

                    }

                    console.log(this.usersInfo);

                    this.list = this.usersInfo


                }).catch(err => {
                    // handle error
                    console.log(err)
                })
                loading.close();
            },
            async getMember() {
                const loading = this.$loading({
                    lock: true,
                    text: 'Loading',
                    background: 'rgba(255,255,255, 0.7)'
                });
                var department = this.nowDepartment;
                console.log("获取信息");
                $("#selectAll").removeProp("checked")
                this.select = department
                    // 1.根据侧边栏的不同，然后获取不同部门的人员
                    /*1.写一个department参数，点击不同部门时传入不同参数
                        2.在方法中使用where分开 
                     */
                await this.db.collection("Users").where({
                    department: department,
                    Position: this._.exists(true)
                }).get().then(res => {
                    console.log(res);
                    var dataArray = res.data
                    var arraryLength = res.data.length
                    this.usersInfo.splice(0, this.usersInfo.length)
                    for (let i = 0; i < arraryLength; i++) {
                        this.usersInfo.push(dataArray[i])
                    }
                    console.log(this.usersInfo);
                    this.list = this.usersInfo;
                    loading.close();
                })


            },

            viewApplication(_openid) {

                this.isLoading = true; //开启加载窗口

                // this.$refs.fileRef.dispatchEvent(new MouseEvent('click'))

                /*  1.先获取对应的openID，然后到willing表中查询其fileID

                    2.使用getTempFileURL获取下载路径，然后直接打开 */

                this.db.collection("Willings").where({

                    '_openid': _openid

                }).get().then(res => {



                    //res ---> data数组

                    console.log(res);

                    if (res.data.length) {

                        this.cloud.getTempFileURL({

                            fileList: [res.data[0].fileID],

                            success: res => {

                                // get temp file URL

                                console.log(res)

                                this.isLoading = false; //关闭加载窗口

                                window.open(res.fileList[0].tempFileURL, "_blank");

                            },

                            fail: err => {

                                // handle error

                            }

                        })

                    } else {





                        this.$message({

                            message: '该用户没有报名表',

                            type: 'info'

                        });

                        this.isLoading = false;

                    }

                })



            },

            // elementui下拉菜单item触发事件配置
            handleCommand(command) {
                let that = this;
                console.log("触发：" + command);
                switch (command) {
                    case "exportExcel":
                        {
                            that.exportExcel();
                            break;
                        }
                    case "exportApplication":
                        {
                            that.exportApplication();
                            break;
                        }
                }
            },

            async exportApplication() {
                const loading = this.$loading({
                    lock: true,
                    text: 'Loading',
                    background: 'rgba(255, 255, 255, 0.7)'
                });

                /*  勾选思路，

                                1.如果选中则向item添加select=true  √

                                2.导出时遍历当前userInfo，拿到select为true的，然后储存在_openidArray √

                                3.使用_openid查询到willing表中对应的,然后储存到fileidArray √

                                4.遍历fileArrayID获得temperURl，构造对象数组downloadURl √

                                5.压缩 √

                                 */

                console.log("点了");

                // 将openidArray,fileidArray初始化

                this.openidArray = []

                this.fileidArray = []

                this.downloadURL = []



                for (let val of this.list) {

                    console.log("进来了");

                    if (val.check) {

                        console.log("修改后的");

                        this.openidArray.push(val._openid)

                    }

                }



                if (this.openidArray.length != 0) {

                    // console.log("选中");

                    // 3.使用_openid查询到willing表中对应的,然后储存到fileidArray  √

                    this.fileidArray = [] //初始化

                    for (let val of this.openidArray) {

                        await this.db.collection("Willings").where({

                            _openid: val

                        }).get().then(res => {

                            console.log(res);

                            this.fileidArray.push(res.data[0].fileID)

                        }).catch(error => {

                            console.log("获取fileID错误", error);

                        })

                    }

                    console.log("fileArray");

                    console.log(this.fileidArray);



                    // 4.遍历fileArrayID获得temperURl，构造对象数组downloadURl √  ====>切割链接



                    // 一次最多50个

                    //如果数量超过50,则计算需要获取的次数，然后进行多次获取

                    var count = this.fileidArray.length

                    var batchTime = Math.ceil(count / 50);

                    if (batchTime >= 2) {

                        var fileidArrayCount = this.spliceArray(this.fileidArray, 50)

                        //得到切割后的二重数组后，再将其拼起来。

                        var temperData = []

                        for (let i = 0; i < fileidArrayCount.length; i++) {

                            temperData = temperData.concat(fileidArrayCount[i])

                            //  [ [50个],[n个] ]

                        }

                        //    this.fileidArray=temperData;

                        this.FilearrayArray = temperData;

                        var oldData = [];
                        console.log(this.FilearrayArray);
                        for (let val of this.FilearrayArray) {

                            await this.cloud.getTempFileURL({

                                fileList: [val],



                            }).then(res => {

                                oldData = oldData.concat(res.fileList)

                            })

                        }

                        var fileList = oldData;

                        //初始化

                        this.downloadURL = []

                        for (let val of fileList) {

                            var url = val.tempFileURL

                            var fileName = url.substring(url.indexOf("applicationForm") + 29, url.length);

                            var item = {

                                "fileUrl": url,

                                "fileName": fileName

                            }

                            this.downloadURL.push(item)



                        }

                        console.log("载入完成，downloadURL数组为");

                        console.log(this.downloadURL);

                        //调用接口,返回的是文件名称和URL的数组

                        this.getDownLoadZip(this.downloadURL, "录取文件打包.zip");



                    }



                    await this.cloud.getTempFileURL({

                        fileList: this.fileidArray,



                    }).then(res => {



                        // res => fileList(数组)=> tempFileURL

                        console.log(res);

                        var fileList = res.fileList

                        //初始化

                        this.downloadURL = []

                        for (let val of fileList) {

                            var url = val.tempFileURL

                            var fileName = url.substring(url.indexOf("applicationForm") + 16, url
                                .length);

                            var item = {

                                "fileUrl": url,

                                "fileName": fileName

                            }

                            this.downloadURL.push(item)



                        }

                        console.log("载入完成，downloadURL数组为");

                        console.log(this.downloadURL);

                        //调用接口,返回的是文件名称和URL的数组

                        this.getDownLoadZip(this.downloadURL, "录取文件打包.zip");

                    }).catch(error => {

                        console.log(error);

                        console.log("获取downloadURL失败", error);

                    })

                    //





                } else {

                    this.$message({

                        message: '请勾选成员',

                        type: 'warning'

                    });

                }
                loading.close();

            },

            checkUser(event, item) {

                // console.log(event); 

                console.log("被调用了");

                let check = event.target.checked;

                // let a = $("#checkUser").prop("checked") jquery获得状态

                if (check) {

                    //添加属性

                    // for(let val of this.list){

                    //     if(val._openid==openid){

                    //         val.check=true

                    //     }

                    // }

                    console.log("选中了");

                    this.list.forEach((todo) => {

                        if (todo._openid === item._openid) {

                            vm.$set(todo, 'check', true)

                        }



                    })

                } else {

                    console.log("取消了");

                    this.list.forEach((todo) => {

                        if (todo._openid === item._openid) {

                            vm.$set(todo, 'check', false)

                        }



                    })

                }

            },

            selectAll() {

                let ischeck = $("#selectAll").prop("checked")

                console.log(ischeck);

                if (ischeck) {

                    for (let val of this.list) {

                        // val.check = true; //添加新属性默认不会动态检测变化

                        vm.$set(val, "check", true)

                        console.log(val);

                    }

                    // $("input[name='checkbox']").prop("checked", "true");

                } else {

                    for (let val of(this.list)) {

                        // val.check = false;

                        vm.$set(val, "check", false)

                        console.log(val);

                    }

                    // $("input[name='checkbox']").removeProp("checked");

                }

            },



            //#region 

            //通过url获取图片数据

            getFile(url) {

                return new Promise((resolve, reject) => {

                    axios(url, {

                        method: "GET",

                        responseType: "blob",

                    })

                    .then((res) => {

                        console.log("res", res);

                        resolve(res);

                    })

                    .catch((error) => {

                        reject(error);

                    });

                });

            },



            getDownLoadZip(datas, fileName) {
                // 只能用这种方式打开和关闭loading
                let that = this;
                this.isLoading = true;

                //创建实例

                const zip = new JSZip();



                const promises = []; //用于存储多个promise

                datas.forEach((item) => {

                    const promise = this.getFile(item.fileUrl).then((res) => {

                        const fileName = item.fileName + "";

                        //可参考官方文档进行传参

                        // https://stuk.github.io/jszip/documentation/api_jszip/file_data.html

                        zip.file(fileName, res.data, {

                            binary: true,

                        });

                    });

                    promises.push(promise);

                });



                Promise.all(promises).then(() => {

                    zip.generateAsync({

                        type: "blob",

                        compression: "DEFLATE", // STORE：默认不压缩 DEFLATE：需要压缩

                        compressionOptions: {

                            level: 9, // 压缩等级1~9    1压缩速度最快，9最优压缩方式

                        },

                    }).then((res) => {

                        saveAs(res, fileName ? fileName : "面试报名表文件.zip"); // 利用file-saver保存文件
                        that.isLoading = false;
                    });

                });



            },

            //导出excel，

            // 1.先把选中的项目拿出来 ，放到checkItemArray

            // 2.把checkItemArray 放到一个新的table  ————> checkItemArray中，但是display设置为none ，让其不显示。

            // 3.导出时，选择新的table  

            exportExcel() {

                // 初始化

                this.checkItemArray = []

                for (let val of this.list) {

                    console.log("进来了");

                    if (val.check) {

                        console.log("修改后的");

                        this.checkItemArray.push(val)

                    }

                }

                if (this.checkItemArray.length > 0) {

                    console.log(this.checkItemArray);

                    setTimeout(() => {

                        var table1 = document.querySelector("#checkItemArray");

                        var sheet = XLSX.utils.table_to_sheet(table1); //将一个table对象转换成一个sheet对象

                        openDownloadDialog(sheet2blob(sheet), '成员名单.xlsx');

                    }, 1000);



                } else {



                    this.$message({

                        message: '请勾选成员',

                        type: 'warning'

                    });

                }





            },



            // 删除用户

            deleteUser(_openid, realName, index) {

                var result = "确认删除" + realName + "吗？"

                console.log(_openid);

                this.$confirm(result, '提示', {

                    confirmButtonText: '确定',

                    cancelButtonText: '取消',

                    type: 'warning'

                }).then(() => {



                    this.db.collection('Users').where(

                        {

                            _openid: _openid

                        }).remove({

                        success: res => {

                            console.log(res);

                            this.$message({

                                type: 'success',

                                message: '删除成功!'

                            });

                            this.usersInfo.splice(index, 1)

                        }

                    })



                }).catch(() => {

                    this.$message({

                        type: 'info',

                        message: '已取消删除'

                    });

                });

                // if (result == true) {

                //     console.log("确认");

                //     this.db.collection('Users').where(

                //         {

                //             _openid: _openid

                //         }).remove({

                //             success: res => {

                //                 console.log(res);

                //                 this.usersInfo.splice(index, 1)

                //             }

                //         })

                // } else {

                //     console.log("取消");

                // }

            },

            alertWindows(_openid, realName, department, Position) {

                // 显示

                $("#myModal").css('display', 'block');

                // 关闭

                $(".close").bind("click", function() {

                    $("#myModal").css('display', 'none');

                })

                this.openid = _openid

                this.realName = realName

                this.department = department

                this.Position = Position

            },

            //修改用户信息

            changUser() {

                this.db.collection('Users').where({

                    _openid: this.openid

                }).update({

                    data: {

                        realName: this.realName,

                        department: this.department,

                        Position: this.Position

                    }

                }).then(res => {

                    console.log(res);

                    if (res.stats.updated) {

                        this.$message({

                            message: '修改成功',

                            type: 'success'

                        });

                        // 关闭窗口

                        $(".modal").css('display', 'none')

                    }

                })

            },

        },



        async created() {

            await this.initWx();

            this.checkCookie(); //必须在初始化后，因为要用到云数据库

            await this.getMessage();

            await this.getData();



        },

        watch: {

            keyword: {

                deep: true,

                handler(val) {

                    console.log(val);

                    this.list = this.usersInfo.filter((p) => {

                        return ((p.realName ? (p.realName.indexOf(val) !== -1) : null) || (p.Position ?
                                (p.Position.indexOf(val) !== -1) : null) ||
                            (p.admitTime ? (p.admitTime.indexOf(val) !== -1) : null))

                    })

                }



            },

        },



    })
</script>





</html>